.geometric-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  background-color: hsl(var(--background));
}

.geometric-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(45deg, hsl(var(--accent) / 0.2) 25%, transparent 25%),
    linear-gradient(-45deg, hsl(var(--accent) / 0.2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, hsl(var(--accent) / 0.2) 75%),
    linear-gradient(-45deg, transparent 75%, hsl(var(--accent) / 0.2) 75%);
  background-size: 60px 60px;
  opacity: var(--pattern-opacity);
}

.geometric-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(hsl(var(--primary) / 0.15) 1px, transparent 1px),
    radial-gradient(hsl(var(--secondary) / 0.15) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 20px 20px;
  animation: pulse 15s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    opacity: var(--pattern-opacity);
    transform: scale(1);
  }
  50% {
    opacity: calc(var(--pattern-opacity) + 0.2);
    transform: scale(1.02);
  }
  100% {
    opacity: var(--pattern-opacity);
    transform: scale(1);
  }
}
